<template>
  <div :class="modalClass" id="modal-box">
    <div id="content">
      <p class="top">
        <img src="../common/imgs/outcoinDanger.png" alt="">
      </p>
      <p class="title">风险提示</p>
      <div class="reminder">
        您的提币操作一旦完成，对应的资产所有权将由您变更为目标地址所对应的账户所有人享有，请您务必在提币操作前，仔细核对提币地址信息，确保提币属于自愿行为，并确认不涉及任何传销、非法集资、诈骗等违法情形，避免造成不要的财产损失。
      </div>
      <div class="btns">
        <button class="cancel" @click="cancel">取消</button>
        <button class="confirm" @click="callback">确定</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name : 'outCoinDangerDialog',
    data(){
      return{
        modalClass: 'modal-hide',
      }
    },
    methods:{
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      callback() {
        this.$emit('confirm');
        this.hide();
      },
      cancel(){
        this.$emit('cancel');
        this.hide();
      }
    }
  }
</script>
<style type="text/less" lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #modal-box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
    padding-top: 0;padding-bottom: 0;
  }
  #content{
    width: 476px;height: 380px;margin-top: -190px;margin-left: -238px;left: 50%;top: 50%;padding:0;
    overflow:hidden;background: #fff;.borderRadius;position: absolute;
    >.top{
      font-size: 0;
      >img{
        width: 100%;
      }
    }
    >.title{
      text-align: center;font-size: 20px;padding-top: 25px;color: #262626;padding-bottom: 16px;
    }
    >.reminder{
      padding: 0 35px;color: #767676;font-size: 16px;line-height: 170%;text-align: left;padding-bottom: 23px;
    }
    >.btns{
      text-align: center;
      >.cancel{
        .cancel;
      }
      >.confirm{
        .submit;margin-left: 33px;
      }
      >button.cancel,>button.confirm{
        width: 130px;height: 38px;line-height: 38px;font-size: 16px;
      }
    }

  }
  /*动画*/
  @import "../common/style/animate.css";
</style>
